<template>
  <div>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
            <div class="report_header_query">
              <el-input prefix-icon="el-icon-search" placeholder="姓名" v-model="query.name"></el-input>
            </div>
            <div class="report_header_query">
              <el-input prefix-icon="el-icon-search" placeholder="工号"  v-model="query.number"></el-input>
            </div>
          </div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="querySysEmployee">查询</el-button>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['sysEmployee.add']">新增</el-button>
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <div>
        <el-table
          ref="multipleTable"
          :data="SysEmployeeForm"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          border
          :height="curHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            align="center">
          </el-table-column>

          <el-table-column
            prop="empNo"
            label="工号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="officeName"
            label="部门"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status == 0?'info':'success'">
                <span>{{scope.row.status | watchStatus}}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
          >
          </el-table-column>
          <el-table-column
            label="功能"
            align="center"
            prop="remark"
            width="80"
            fixed="right"
          >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="启用或停用" placement="top-start">
              <el-button v-permission="['sysEmployee.edit']" :loading="scope.row.loading" @click="openSysEmployee(scope.row)" type="primary" size="mini">{{scope.row.status == 0?'启用':'停用'}}</el-button>
            </el-tooltip>
          </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="80" align="center">
            <template slot-scope="scope">
              <div>
                <el-tooltip v-permission="['sysEmployee.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                  <a  @click="editClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-edit"></i>
                  </a>
                </el-tooltip>
                <el-tooltip v-permission="['sysEmployee.del']" class="item" effect="dark" content="删除" placement="top-start">
                  <a style="margin-left: 10px"  @click="deleteSysEmployee(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  export default {
    directives: { permission },
    data(){
      return{
        query: {
          name: '',
          number: ''
        },
        // 返回数据
        queryType:false,
        curHeight:null
      }
    },
    props:[
      'SysEmployeeForm'
    ],
    filters:{
      watchStatus(val){
        if (val  == 1){
          return '启用'
        }else {
          return '停用'
        }
      }
    },
    mounted(){
      this.comeIn();
      this.beforeMount()
    },
    methods:{
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == true) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn(){
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      },
      querySysEmployee() {
        this.$emit('querySysEmployee',this.query);
      },
      editClick(row) {
        this.$emit('editClick',row)
      },
      deleteSysEmployee(row) {
        console.log(row)
        this.$emit('deleteSysEmployee',row.id);
      },
      openSysEmployee(row){
        row.loading = true
        this.$emit('openSysEmployee',row);
      },
      resetSysEmployee:function () {
        this.query.name= '';
        this.query.number= '';
        this.$emit('resetSysEmployee')
      },
      addClick:function () {
        this.$router.push({path: '/sysEmployee/add'});
      },
      hiddenClick:function () {
        this.queryType = !this.queryType
        if (this.queryType == true) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      }
    }
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
